<template>
	<!-- 申报租赁信息查询页面 -->
	<view class="tdsys">
		<view class="title">
			<text>城镇土地使用税申报</text>
		</view>
		<view>
			<view class="sbnsrxx">
				<view style="margin-left: 20rpx;">当前纳税人：{{userInfo.xm}}（{{userInfo.shxydm}}）</view>
			</view>
			<view class="zlform">
				<uni-forms :value="{}" ref="form" validate-trigger="bind" err-show-type="undertext">
					<view class="zlformItem">
						<uni-forms-item name="address" label="市" label-width="100rpx" required>
							<view class="selectXlk">
								<picker @change="cityChange" :value="cityIndex" :range="cityArr">
									<view>{{cityArr[cityIndex]}}</view>
								</picker>
							</view>
						</uni-forms-item>
						<uni-forms-item name="address" label="区(县)" label-width="100rpx">
							<view class="selectXlk">
								<picker @change="countyChange" :value="countyIndex" :range="countyArr">
									<view>{{countyArr[countyIndex]}}</view>
								</picker>
							</view>
						</uni-forms-item>
					</view>
					<view class="zlformItem">
						<uni-forms-item name="address" label="街道" label-width="100rpx">
							<view class="selectXlk">
								<picker @change="jdChange" :value="jdIndex" :range="jdArr">
									<view>{{jdArr[jdIndex]}}</view>
								</picker>
							</view>
						</uni-forms-item>
					</view>
					<view class="address">
						<uni-forms-item name="address" label="地址" label-width="100rpx">
							<input type="text" v-model="address" placeholder="请输入房源地址" class="uni-input-border" />
						</uni-forms-item>
					</view>
				</uni-forms>
				<view class="btn">
					<button type="primary" size="mini" @click="bindSearch">查询</button>
					<button type="default" plain="true" size="mini" @click="resetForm">重置</button>
				</view>
			</view>
		</view>

		<view class="con">
			<view style="margin-left: 20rpx;" class="tableTitle">
				<view class="lsbt"></view><text>有效租赁信息</text>
			</view>
			<!--type="selection" @selection-change="selectionChange"  -->
			<view class="table">
				<uni-table ref="table" border stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="80rpx"></uni-th>
						<uni-th align="center" width="200rpx">房源编号</uni-th>
						<uni-th align="center" width="300rpx">出租屋地址</uni-th>
						<uni-th align="center" width="150rpx">不动产取得时间</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in zlLists" :key="index">
						<uni-td align="center">
							<checkbox-group @change="checkboxChange">
								<checkbox :value="String(index)" :checked="checkboxIndex===index" />
							</checkbox-group>
						</uni-td>
						<uni-td align="center">{{item.houseCode}}</uni-td>
						<uni-td align="center">{{item.address}}</uni-td>
						<uni-td align="center">{{item.houseGainTime}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view class="cxjg">查询结果共有<text class="jgzs">{{pageData.total}}</text>条，当前为第<text
					class="dqws">{{pageData.pageIndex}}</text>页
			</view>
			<view class="fy">
				<uni-pagination :total="pageData.total" :pageSize="pageData.pageSize" :current="pageData.pageIndex"
					@change="pageChange" title="标题文字" prev-text="前一页" next-text="后一页" />
			</view>
		</view>
		<view class="btn sbBtn">
			<button type="primary" size="mini" @click="tdsyssbBtn">城镇土地使用税申报</button>

		</view>
	</view>
</template>

<script>
	import {
		getCxPageList,
		getPreSbInfo,
		getXzqhByQO,
		getJdxzByQO
	} from "@/utils/common-api.js"
	import commonTools from "@/utils/common-tools.js";
	let xzh = commonTools.getXzq()
	export default {
		data() {
			return {
				userInfo: commonTools.getUserInfo() || {},
				title: 'picker',
				// 市
				cityList: [xzh.xzqhszDm],
				cityArr: [xzh.xzqhmc],
				cityIndex: 0,
				// 区（县）
				countyArr: [],
				countyIndex: 0,
				countyLists: [],
				// 街道
				jdArr: ["请选择"],
				jdLists: [],
				jdIndex: 0,
				// 租赁信息
				zlLists: [],
				pageData: {
					total: 0,
					pageIndex: 1,
					pageSize: 5,
				},
				checkboxIndex: "",
				xzXlData: "",
				address: "", //地址
				xzqhszDm: "", //行政区dm
				jdxzDm: "", //街道dm

			}
		},
		async onLoad() {
			await this.getCounty()
		},
		onShow() {
			this.handleSearch()
		},
		methods: {
			// 租赁信息查询
			async handleSearch() {
				this.xzXlData = ""
				this.checkboxIndex = ""

				let params = {
					pageIndex: this.pageData.pageIndex,
					pageSize: this.pageData.pageSize,
					sjXzqhsjDm: this.cityList[this.cityIndex],
					qjXzqhsjDm: this.xzqhszDm,
					jdxzDm: this.jdxzDm,
					address: this.address,
					isTd: "1"
				}
				let res = await getCxPageList({
					...params
				})
				if (res.head.errorCode == "0") {
					this.zlLists = res.body.data
					let page = res.body.pager
					this.pageData.total = page.recordCount
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
			},
			// 分页切换
			pageChange(e) {
				// console.log(e)
				this.pageData.pageIndex = e.current
				this.handleSearch()
			},
			// 点击查询
			bindSearch() {
				this.pageData = {
					total: 0,
					pageIndex: 1,
					pageSize: 5,
				}
				this.handleSearch()

			},
			//重置表单
			resetForm() {
				this.address = "" //地址
				// this.houseRentTypeCode = "" //出租屋类别
				this.xzqhszDm = "" //行政区dm
				this.jdxzDm = "" //街道dm
				this.jdArr = ["请选择"]
				this.jdLists = []
				this.countyIndex = 0
				this.pageData = {
					total: 0,
					pageIndex: 1,
					pageSize: 5,
				}
				this.handleSearch()
			},

			// 行政区获取
			async getCounty() {
				this.countyArr = []
				this.countyArr.push("请选择")
				let res = await getXzqhByQO({
					sjxzqhszDm: this.cityList[this.cityIndex]
				})
				if (res.head.errorCode == "0") {
					this.countyLists = res.body
					res.body.map(item => {
						this.countyArr.push(item.xzqhmc)
					})
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
			},
			//街道获取
			async getJd() {
				this.jdArr = []
				this.jdArr.push("请选择")
				this.jdxzDm = ""
				this.jdIndex = 0
				let res = await getJdxzByQO({
					xzqhszDm: this.xzqhszDm
				})
				console.log(res)
				if (res.head.errorCode == "0") {
					this.jdLists = res.body
					res.body.map(item => {
						this.jdArr.push(item.jdxzmc)
					})
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}

			},
			// 市修改
			cityChange(e) {
				this.cityIndex = e.detail.value
			},
			// 区（县）修改
			async countyChange(e) {
				this.countyIndex = e.detail.value
				// console.log(this.countyIndex)
				if (this.countyIndex !== 0) {
					this.xzqhszDm = this.countyLists[this.countyIndex - 1].xzqhszDm
					await this.getJd()
				} else {
					this.xzqhszDm = ""
					this.jdArr = ["请选择"]
					this.jdLists = []
					this.jdIndex = 0
					this.jdxzDm = ""
				}

			},
			// 街道
			jdChange(e) {
				this.jdIndex = e.detail.value
				if (this.jdIndex !== 0) {
					this.jdxzDm = this.jdLists[this.jdIndex - 1].jdxzDm
				} else {
					this.jdxzDm = ""
				}
			},
			// 返回
			goBack() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			// 表格租赁选择
			checkboxChange(e) {
				let index = e.detail.value[0]
				if (index != undefined) {
					this.checkboxIndex = parseInt(index)
					this.xzXlData = this.zlLists[parseInt(index)]
				} else {
					this.checkboxIndex = ""
					this.xzXlData = ""

				}
			},
			// 综合税费申报
			async tdsyssbBtn() {
				if (!this.xzXlData) {
					uni.showToast({
						title: '请选择房源信息',
						icon: 'error',
						duration: 1000
					});
					return
				}
				let xzXlData = this.xzXlData
				let params = {
					...this.xzXlData,
					sblx: "03",
					sbqd: "02",
					isNeedRentMx: "1"
				}
				uni.navigateTo({
					url: "/pages/cztdsyssb/tdsyssb?tdssbForm=" + JSON.stringify(params),
				})
			},

		}
	}
</script>

<style>
	.tdsys {
		background: #ffffff;
		min-height: 1334rpx;
		padding-bottom: 40rpx;
	}

	.title {
		width: 100%;
		height: 80rpx;
		background: #3171d5;
		text-align: center;
		line-height: 80rpx;
		color: white;
	}

	.title .iconfont {
		float: right;
		margin-right: 20rpx;
	}

	.sbnsrxx {
		padding: 20rpx 5rpx;
		border-bottom: 5rpx solid #3171d5;
		color: #666666;
		font-size: 28rpx;
	}

	.zlform {
		padding: 20rpx 0 0 0;
	}

	.zlformItem {
		display: flex;
	}

	::v-deep .uni-forms-item__label {
		justify-content: flex-end !important;
		padding-right: 10rpx !important;
		text-align: end;

	}

	::v-deep .uni-forms-item {
		margin-bottom: 10rpx;
	}

	.selectXlk {
		padding: 0 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		font-size: 28rpx;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 10rpx;
		box-sizing: border-box;
		width: 270rpx;
		font-size: 28rpx;
		overflow: hidden;
	}

	.address {
		margin-right: 10rpx;
	}

	.uni-input-placeholder {
		font-size: 28rpx;
	}

	.uni-input {
		color: gray;
	}

	.uni-input-border {
		padding: 0 20rpx;
		height: 70rpx;
		width: 100%;
		font-size: 28rpx;
		color: #666;
		border: 2rpx #e5e5e5 solid;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.btn {
		text-align: center;
	}

	.btn uni-button {
		width: 240rpx;
		margin: 0 20rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

	.sbBtn uni-button {
		width: 320rpx;
	}

	.con {
		padding: 10rpx;
		background: #ffffff;
		box-sizing: border-box;
	}

	.tableTitle {
		font-size: 26rpx;
		color: black;
		margin-bottom: 10rpx;
		font-weight: 600;
		position: relative;
	}

	.tableTitle .lsbt {
		position: absolute;
		left: -18rpx;
		top: 4rpx;
		width: 8rpx;
		height: 30rpx;
		background: #1198d3;
		border-radius: 4rpx;
	}

	.table {
		word-break: break-all;
	}

	.uni-table .uni-table-th,
	.uni-table .uni-table-td {
		font-size: 24rpx;
		color: black;
		padding: 10rpx 10rpx;


	}

	.uni-table .uni-table-th {
		background: #f2f2f2;
	}

	.fy {
		margin: 10rpx 5rpx;
	}

	::v-deep .uni-pagination__btn {
		background: #00000063;
		opacit: 1;
	}

	::v-deep .uni-pagination__child-btn {
		color: #ffffff;
	}

	.cxjg {
		font-weight: bold;
		font-size: 26rpx;
		text-align: center;
		margin-top: 10rpx;
	}

	.cxjg .jgzs {
		color: #3171d5;
	}

	.cxjg .dqws {
		color: red;
	}
</style>